PF4 preview: https://patternfly-org-pr-2892-v4.surge.sh/v4

@nicolethoen from the backlog meeting earlier, I noticed one issue regarding Popover and adding hover functionality. After digging through that, based on issue #2871 + conversation in the issue linked in it, do you think it would be better to update the a11y docs for Tooltips taking into account these intended changes to Tooltip + Popover? For the most part may just be a case of re-adding the recommendation to not use tooltips on static elements, and then later adding in any other verbiage the design guidelines end up including.

For the most part may just be a case of re-adding the recommendation to not use tooltips on static elements, and then later adding in any other verbiage the design guidelines end up including.

I think I agree - we should include the recommendation of not using tooltips on static elements and then we can follow up if recommendations evolve.
The only exception being if we already are following the 'yet to be written' recommendations in the examples/demos and then it would just mean that the design guidelines would be one step behind the a11y docs which is not the end of the world.

Updated the docs a bit based on convo above. I also included some verbiage for when one might use labelledby or describedby.

@thatblindgeye I think the information here is very helpful - but it is a lot of information. I wonder if each or most of your bullet points could benefit from a snippet of html or react to demonstrate what you are describing. Sort of link how we do on the website when talking about icons accessibility

@nicolethoen @jessiehuff I updated the tooltip doc with the new template. I also added in some code blocks/examples for certain things throughout. For examples with specific props, they're not exactly inline in the table and instead placed in sub-sections, so let me know what you think of that sort of layout or if you have other ideas for how to go about them

Or maybe it was just me that got confused haha.

I definitely think you raise a valid point. What do you think of something along the lines of this instead:

- Pass in `role="tooltip"` to the element acting as the tooltip component if using the HTML/CSS library
- Pass in `aria="labelledby"` to the tooltip component if using the PatternFly React library, or the `aria-labelledby` attribute to the trigger if using the HTML/CSS library, when the tooltip should act as the primary label for its trigger

or use nested bullets to separate the two libraries:

- Pass in `aria="labelledby"` to the tooltip component if using the PatternFly React library when the tooltip should act as the primary label for its trigger.
    - Pass in the `aria-labelledby` attribute to the trigger if using the HTML/CSS library

The "if using X library..." could also be placed first, e.g. "If using the HTML/CSS library, pass in role="tooltip"...".

If we did want separate bulleted lists, we could do something along the lines of:

To implement an accessible PatternFly tooltip:

- ...

For the PatternFly React library:

- ...

For the HTML/CSS library:

- ...

I think I like your second suggestion more. maybe something like:

To implement an accessible PatternFly tooltip:

• Avoid using tooltips on static elements such as a div or span, except in cases of truncation.

Using react:

• Pass in aria="labelledby" when the tooltip should act as the primary label for its trigger (with snippet)

Using HTML/CSS:

• Set the aria-labelledby attribute on the trigger when the tooltip should act as the primary label for its trigger. (code snippet)
• Pass in the aria-describedby attribute to the trigger (HTML/CSS) when the tooltip should act as supplementary information. (code snippet)